<template>
  <div class="scrollRightIco" @click="$router.push('/talk')">
    <div class="leftIco">
      <el-icon :size="20">
        <ChatDotSquare />
      </el-icon>
    </div>
    <div class="rightIco">
      <el-icon :size="15">
        <DArrowRight />
      </el-icon>
    </div>
    <vue3-seamless-scroll :list="list" class="scroll" :step="0.5">
      <div class="item" v-for="(item,index) in list" :key="item + index">
        <span>{{ item.talk }}</span>
      </div>
    </vue3-seamless-scroll>
  </div>
</template>
<script>
import { reactive, toRefs, onMounted } from "vue";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import http from '@/utils/http';
export default {
  name: "index",
  components: {
    Vue3SeamlessScroll,
  },
  setup () {
    const state = reactive({
      list: [
      ],
    });
    onMounted(() => {
      http.get('/talk?page=1&limit=8').then(res => {
        state.list = res.data.info.data
      })
    })
    return {
      ...toRefs(state),
    };
  },
};
</script>
<style lang='scss' scoped>
.scrollRightIco {
  position: relative;
  .rightIco,
  .leftIco {
    position: absolute;
    width: 40px;
    height: 100%;
    top: 0;
    line-height: 55px;
  }
  .leftIco {
    left: 20px;
  }
  .rightIco {
    position: absolute;
    top: 0;
    right: 0px;
    line-height: 50px;
    animation: move 2s infinite;
  }
}
@keyframes move {
  0% {
  }
  100% {
    opacity: 0;
    transform: translateX(70%);
  }
}
.scroll {
  height: 44px;
  width: 100%;
  margin: 0 auto;
  background: #fff;
  overflow: hidden;
  border-radius: 10px;
  padding: 0 100px;
  cursor: pointer;
  color: #666;
  font-size: 16px;
}
.scroll .item {
  max-width: 500px;
  padding: 10px 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-weight: 400;
  letter-spacing: 3px;
  color: #888;
  margin: auto;
  text-align: center;
}
</style>
